<template>
    <div class="image-panel">
      <div class="search-header">
        <div class="search-box">
          <el-input
            v-model="searchText"
            placeholder="搜索"
            size="small"
            @input="handleSearch"
          ></el-input>
          <div class="search-icon">
            <i class="el-icon-search"></i>
          </div>
          <div class="divider"></div>
          <div class="ai-text">AI</div>
        </div>
        <div class="bottom-divider"></div>
        <el-upload
          class="import-btn"
          action="#"
          :auto-upload="false"
          :show-file-list="false"
          :on-change="handleFileChange"
          accept="image/*,video/*"
        >
          <el-button type="default" size="small">导入图片/视频</el-button>
        </el-upload>
      </div>
  
      <div class="content">
        <div class="media-list">
          <div 
            v-for="(item, index) in filteredList" 
            :key="index"
            class="media-item"
            draggable="true"
            @dragstart="handleDragStart($event, item)"
          >
            <div class="media-info">
              <div class="media-title">
                <span class="index">{{ index + 1 }}.</span>
                <span class="name">{{ item.name }}</span>
              </div>
              <div class="media-actions">
                <i class="el-icon-edit" @click="handleEdit(item)"></i>
                <i class="el-icon-delete" @click="handleDelete(index)"></i>
              </div>
            </div>
            <div class="media-preview">
              <img v-if="item.type === 'image'" :src="item.url" :alt="item.name">
              <video v-else :src="item.url" controls></video>
            </div>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script>

  export default {
    name: 'ImagePanel',
    data() {
      return {
        imageList: [],
        searchText: '',
        filteredList: []
      };
    },
    methods: {
      handleFileChange(file) {
        const reader = new FileReader();
        reader.onload = (e) => {
          const newItem = {
            name: file.name,
            url: e.target.result,
            file: file.raw,
            type: file.raw.type.startsWith('video/') ? 'video' : 'image'
          };
          this.imageList.push(newItem);
          this.filteredList.push(newItem);
        };
        reader.readAsDataURL(file.raw);
      },
      handleSearch() {
        if (!this.searchText) {
          this.filteredList = [...this.imageList];
          return;
        }
        const keyword = this.searchText.toLowerCase();
        this.filteredList = this.imageList.filter(item => 
          item.name.toLowerCase().includes(keyword)
        );
      },
      handleDragStart(event, item) {
        event.dataTransfer.setData('text/plain', JSON.stringify({
          type: item.type,
          data: item
        }));
      },
      handleEdit(item) {
        // 编辑功能待实现
        console.log('编辑', item);
      },
      handleDelete(index) {
        const item = this.filteredList[index];
        const originalIndex = this.imageList.findIndex(i => i === item);
        this.imageList.splice(originalIndex, 1);
        this.filteredList.splice(index, 1);
      }
    },
    created() {
      this.filteredList = [...this.imageList];
    }
  };
  </script>
  
  <style lang="scss" scoped>
  .image-panel {
    padding: 20px 15px;
    
    .search-header {
      margin-bottom: 20px;
      
      .search-box {
        position: relative;
        width: 100%;
        margin-bottom: 15px;
        
        :deep(.el-input) {
          width: 100%;
          
          .el-input__inner {
            height: 32px;
            line-height: 32px;
            border-radius: 4px;
            padding-left: 12px;
            padding-right: 60px;
            font-size: 14px;
          }
        }
        
        .search-icon {
          position: absolute;
          right: 40px;
          top: 50%;
          transform: translateY(-50%);
          display: flex;
          align-items: center;
          justify-content: center;
          width: 16px;
          height: 16px;
          cursor: pointer;
          
          i {
            font-size: 14px;
            color: #909399;
          }
          
          &:hover {
            i {
              color: #409eff;
            }
          }
        }
        
        .divider {
          position: absolute;
          right: 30px;
          top: 50%;
          transform: translateY(-50%);
          width: 1px;
          height: 16px;
          background-color: #dcdfe6;
        }
        
        .ai-text {
          position: absolute;
          right: 12px;
          top: 50%;
          transform: translateY(-50%);
          font-size: 14px;
          color: #409eff;
          font-weight: 500;
          cursor: pointer;
          
          &:hover {
            color: #66b1ff;
          }
        }
      }
  
      .bottom-divider {
        width: 100%;
        height: 1px;
        background-color: #dcdfe6;
        margin-bottom: 15px;
      }
  
      .import-btn {
        width: 100%;
        
        :deep(.el-upload) {
          width: 100%;
        }
        
        .el-button {
          width: 100%;
          height: 32px;
          border: 1px solid #dcdfe6;
          background-color: transparent;
          color: #606266;
          font-size: 14px;
          
          &:hover {
            color: #409eff;
            border-color: #c6e2ff;
            background-color: #ecf5ff;
          }
        }
      }
    }
    
    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
  
      h3 {
        margin: 0;
      }
    }
  
    .content {
      .media-list {
        display: flex;
        flex-direction: column;
        gap: 10px;
        
        .media-item {
          width: 100%;
          border: 1px solid #eee;
          border-radius: 4px;
          overflow: hidden;
          transition: all 0.3s;
  
          &:hover {
            transform: translateY(-2px);
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
          }
  
          .media-info {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 8px 12px;
            border-bottom: 1px solid #eee;
  
            .media-title {
              flex: 1;
              display: flex;
              align-items: center;
              gap: 8px;
              min-width: 0;
              
              .index {
                color: #909399;
                font-size: 12px;
                flex-shrink: 0;
              }
              
              .name {
                color: #606266;
                font-size: 12px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
            }
  
            .media-actions {
              width: 20%;
              display: flex;
              justify-content: flex-end;
              gap: 12px;
              flex-shrink: 0;
              
              i {
                font-size: 14px;
                color: #909399;
                cursor: pointer;
                
                &:hover {
                  color: #409eff;
                }
              }
            }
          }
  
          .media-preview {
            width: 100%;
            height: 120px;
            overflow: hidden;
            
            img, video {
              width: 100%;
              height: 100%;
              object-fit: cover;
            }
          }
        }
      }
    }
  }
  </style> 